<!-- 
    @file: 首页顶部菜单组件
    @auth: lizibin
 -->
<template>
    <div class="hidden-xs-only header-menu">
        <el-menu :default-active="route.path" :router="true" :ellipsis="false" class="el-menu-demo" mode="horizontal"
            active-text-color='#2FA7B9'>
            <!-- <img src="../../../assets/logo.svg" style="cursor: pointer;width:140px;" alt="小李"
                @click="router.push({ path: '/' })"> -->
            <div class="flex-grow" id="fire">
                {{ state.activeText }} |
            </div>
            <span @click="toDemo()" class="loginA">
                更多Demo
            </span>
            <el-menu-item index="/" @click="changeTitle('没错,这是个博客')">
                <span>首页</span>
            </el-menu-item>
            <el-menu-item index="/article" @click="changeTitle('全部文章')">
                <span>全部文章</span>
            </el-menu-item>
            <el-menu-item index="/website" @click="changeTitle('网站链接')">
                <span>网站链接</span>
            </el-menu-item>
            <el-menu-item index="/message" @click="changeTitle('留言板')">
                <span>留言板</span>
            </el-menu-item>
            <el-menu-item index="/about" @click="changeTitle('关于')">
                <span>关于</span>
            </el-menu-item>
            <span @click="toLogin()" class="loginA">
                登录后台
            </span>
            <!-- <el-dropdown v-show="state.isLogin" style="cursor: pointer;">
                <div class="el-dropdown-link" style="margin: auto;">
                    <img v-if="state.userInfo.userIcon !== null && state.userInfo.userIcon !== ''"
                        :src="url + state.userInfo.userIcon"
                        style="width: 30px;margin: 0px 10px;vertical-align:middle;border-radius: 50px;" />
                    <img v-if="state.userInfo.userIcon === null || state.userInfo.userIcon === ''"
                        src="../../../assets/default_avatar.svg"
                        style="width: 30px;margin: 0px 10px;vertical-align:middle;border-radius: 50px;">
                    <span>
                        {{ state.userInfo.userName }}
                    </span>

                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </div>
                <template #dropdown>
                    <el-dropdown-menu v-if="state.userInfo.userType === 0">
                        <el-dropdown-item @click="toPath('/addArticle')">新建文章</el-dropdown-item>
                        <el-dropdown-item @click="toPath('/articleManager')">文章管理</el-dropdown-item>
                        <el-dropdown-item @click="toPath('/classifyManager')">分类管理</el-dropdown-item>
                        <el-dropdown-item @click="toPath('/commentManager')">评论管理</el-dropdown-item>
                        <el-dropdown-item @click="toPath('/userManager')">用户管理</el-dropdown-item>
                        <el-dropdown-item @click="toPath('/linkManager')">链接管理</el-dropdown-item>
                        <el-dropdown-item @click="toPath('/personSetup')">个人设置</el-dropdown-item>
                        <el-dropdown-item @click="toPath('/systemSetup')">系统设置</el-dropdown-item>
                        <el-dropdown-item @click="toPath('/carouseMap')">轮播图</el-dropdown-item>
                        <el-dropdown-item @click="toPath('/circulateText')">循环字</el-dropdown-item>
                        <el-dropdown-item @click="toPath('/visitIp')">访问信息</el-dropdown-item>
                        <el-dropdown-item divided @click="exit">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                    <el-dropdown-menu v-else>
                        <el-dropdown-item @click="toPath('/addArticle')">新建文章</el-dropdown-item>
                        <el-dropdown-item @click="toPath('/articleManager')">文章管理</el-dropdown-item>
                        <el-dropdown-item @click="toPath('/commentManager')">评论管理</el-dropdown-item>
                        <el-dropdown-item @click="toPath('/personSetup')">个人设置</el-dropdown-item>
                        <el-dropdown-item divided @click="exit">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown> -->
        </el-menu>
    </div>

    <div class="hidden-sm-and-up header-img">
        <!-- <img src="../../../assets/logo.svg" style="cursor: pointer;width:140px;margin: 0 auto;" alt="小李"
            @click="router.push({ path: '/' })"> -->
    </div>
</template>

<script lang="ts" setup>

import {
    reactive,
    onMounted,
    onBeforeUnmount
} from 'vue'

import {
    useRoute,
    useRouter
} from "vue-router"
import { GetTopText } from '@/api/foreground/index'
import { useStore } from '@/store/index'
import { storeToRefs } from 'pinia'
const Store = useStore()
const { LoginInfo } = storeToRefs(Store)
const { data: LoginData } = LoginInfo.value;

let textTimer: any = null;


const route = useRoute();
const router = useRouter();
interface State {
    userInfo: any;
    isLogin: boolean;
    top_text: string[];
    activeText: string;
}
const url = import.meta.env.VITE_HTTP
const state = reactive<State>({
    // 当前登录的用户信息
    userInfo: {},
    isLogin: false,
    top_text: [],
    activeText: '',
});
onMounted(() => {
    loadData();
    if (LoginData) {
        state.isLogin = true
        const userInfo = LoginData.data[0];
        state.userInfo = userInfo;
    } else {
        state.isLogin = false
    }
});
onBeforeUnmount(() => {
    clearInterval(textTimer)
});
const changeTitle = (msg: string) => {
    // document.title = msg
}
const loadData = () => {
    // 查询循环字
    const params = {
        'currentPage': 1,
        'pageSize': 9999999,
    }
    GetTopText(params).then(res => {
        let arr: string[] = []
        res.data.list.forEach(e => {
            arr.push(e.text)
        });
        state.top_text = arr;
        circulateText()
    })
}
// 退出登录
const exit = () => {
    Store.loginOut();
    // 刷新界面
    window.location.reload();
}
// 前往某个界面
const toPath = (path: string) => {
    router.push({
        path
    });
}
const toLogin = ()=>{
    window.open('http://www.nicelzb.fun:8082')
}
const toDemo = ()=>{
    window.open('http://www.nicelzb.fun:82')
}
/**
* 模块名:
* 代码描述: 文字循环
* 作者:lizibin
* 创建时间:2023/01/02 09:56:46
*/
const circulateText = () => {
    // 随机选择textArr的一个值
    let random = Math.floor(Math.random() * (state.top_text.length));
    let nowText = state.top_text[random];
    let i = 0;
    textTimer = setInterval(function () {
        if (state.activeText.length < nowText.length) {
            state.activeText += nowText[i++];
        } else {
            state.activeText = ''
            clearInterval(textTimer)
            circulateText()
        }
    }, 300)
}

</script>

<style scoped>
/* 顶部菜单栏 */
.flex-grow {
    flex-grow: 1;
}

.el-menu--horizontal {
    border-bottom: none;
}

.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
    color: #2FA7B9;
    background-color: rgba(47, 167, 185, 0.1);
}

.header-img {
    display: flex;
    align-items: center;
    text-align: center;
    line-height: 90px;
}

.el-menu--horizontal>.el-menu-item a {
    color: #303133;
}

.el-menu--horizontal>.el-menu-item a:hover {
    color: #2FA7B9;
}

.loginA {
    line-height: 56px;
    font-size: 14px;
    margin-left: 10px;
    cursor: pointer;
    color: #3a74fc;
}

.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}

:deep(.el-dropdown-menu__item:not(.is-disabled):focus) {
    background-color: rgba(47, 167, 185, 0.1);
    color: #2fa7b9;
}

#fire {
    text-align: center;
    letter-spacing: 1px;
    line-height: 58px;
    font-family: '方正启体简体';
}
</style>